$(function() {

    //放大镜效果
    //小区域 small_photo
    //中图 middle_photo
    //大区域  largePhotoArea   大图 largePhoto
    //按照比例获取中区域的宽度 
    let middelAreaWidth = parseInt(($(".largePhotoArea").width() * $(".middle_photo").width()) / $(".largePhoto").width());
    let middelAreaHeight = parseInt(($(".largePhotoArea").height() * $(".middle_photo").height()) / $(".largePhoto").height());

    $(".middle_photo").on("mouseenter", function() {
        //鼠标移入，阴影区域显示,并重新设置宽高
        $(".middelArea").css({
            width: middelAreaWidth,
            height: middelAreaHeight,
            display: "block"
        })
        $(".largePhotoArea").css({
            display: "block",
        })
        $(document).on("mousemove", function(e) {
            let disX = e.pageX - $(".middle_photo").offset().left - $(".middelArea").width() / 2;
            let disY = e.pageY - $(".middle_photo").offset().top - $(".middelArea").height() / 2;
            //进行判断，中区域不能超出中图片的位置
            if (disX < 0) {
                disX = 0;
            }
            if (disY < 0) {
                disY = 0;
            }
            if (disX > $(".middle_photo").width() - $(".middelArea").width()) {
                disX = $(".middle_photo").width() - $(".middelArea").width();
            }
            if (disY > $(".middle_photo").height() - $(".middelArea").height()) {
                disY = $(".middle_photo").height() - $(".middelArea").height();
            }
            //把新的位置赋值给中区域
            $(".middelArea").css({
                    left: disX,
                    top: disY
                })
                //获得大图与中图的比例,大图按比例反向移动
            let rate = $(".largePhoto").width() / $(".middle_photo").width();

            $(".largePhoto").css({
                left: -rate * disX,
                top: -rate * disY
            })
        })
    })
    $(".middle_photo").on("mouseleave", function() {
        console.log(111);
        $(".middelArea").css({
            display: "none"
        })
        $(".largePhotoArea").css({
            display: "none",
        })
    })
    $(".small_photo ul li").on("click", function() {
        let currentIndex = $(this).index();
        $(".middle_photo img").attr("src", "./images//food/cart01_" + (currentIndex + 1) + "_2.jpg");
        $(".largePhoto").attr("src", "./images//food/cart01_" + (currentIndex + 1) + "_3.jpg");
    })


    //商品详情的数量加减
    //加
    let val = $("#txt").val(); //拿到输入框的数量，默认为0
    $(".plus").on("click", function() {
            val++;
            $(this).next().val(val);
            let num = $(this).next().val();
            let promotionPrice = Number($("#promotionPrice").text().split("￥")[1]); //促销价
            total = promotionPrice * parseInt(num); //总金额
            $("#total").text("￥" + total);
        })
        //减
    $(".reduce").on("click", function() {
        // console.log(val);
        if (val <= 0) {
            val = 0;
            return;
        }
        val--;
        $(this).prev().val(val);
        let num = $(this).prev().val();
        let promotionPrice = Number($("#promotionPrice").text().split("￥")[1]); //促销价
        total = promotionPrice * parseInt(num); //总金额
        $("#total").text("￥" + total);
    })


    //购物车的数量加减
    //加
    $(".Cartplus").on("click", function() {
        let cartVal = Number($(this).next().val()); //拿到输入框的数量，默认为0
        cartVal++;
        $(this).next().val(cartVal);
        let num = $(this).next().val(); //当前数量
        let promotionPrice = parseInt($(this).parents("tr").find(".cartPromotionPrice").text()); //促销价
        total = promotionPrice * parseInt(num); //当前总金额
        $(this).parents("tr").find(".cartTotal").text(total.toFixed(2));

        //判断当前checkbox是否被选中
        // let checkboxs = $(".cartTbody").find("input[type=checkbox]"); //再次拿到所有复选框
        let totalAmount = parseInt($("#totalAmount").text()); //拿到总金额
        let status = $(this).parents("tr").find("input[type=checkbox]").prop("checked"); //当前商品checkbox的状态
        if (status) {
            //如果为true，加上当前商品的总价，赋值给总金额
            totalAmount += Number($(this).parents("tr").find(".cartPromotionPrice").text());
            $("#totalAmount").text(totalAmount.toFixed(2));
            console.log(Number($(this).parents("tr").find(".cartPromotionPrice").text()));
            return;
        }
    })

    //减
    $(".cartReduce").on("click", function() {
        let cartVal = Number($(this).prev().val()); //拿到输入框的数量，默认为0
        // console.log(val);
        if (cartVal <= 0) {
            cartVal = 0;
            return;
        }
        cartVal--;
        $(this).prev().val(cartVal);
        let num = $(this).prev().val();
        let promotionPrice = parseInt($(this).parents("tr").find(".cartPromotionPrice").text()); //促销价
        total = promotionPrice * parseInt(num); //总金额
        $(this).parents("tr").find(".cartTotal").text(total.toFixed(2));

        let totalAmount = parseInt($("#totalAmount").text()); //拿到总金额
        //判断当前checkbox是否被选中
        let status = $(this).parents("tr").find("input[type=checkbox]").prop("checked"); //当前商品checkbox的状态
        if (status) {
            //如果为true，减去当前商品的总价，赋值给总金额
            totalAmount -= Number($(this).parents("tr").find(".cartPromotionPrice").text());
            $("#totalAmount").text(totalAmount.toFixed(2));
            console.log(Number($(this).parents("tr").find(".cartPromotionPrice").text()));
            return;
        }
    })


    //全选

    $("#checkAll").on("click", function() {
        let totalAmount = parseInt($("#totalAmount").text()); //总金额 
        console.log($("#totalAmount").text());
        let status = $(this).prop("checked"); //全选按钮的状态
        $(".cartTbody").find("input[type=checkbox]").prop("checked", status);
        if (status) {
            //如果为true，则拿到tbody里面所有的checkbox所对应的商品总额
            //进行遍历，最后赋值给总金额
            Array.from($(".cartTbody").find("input[type=checkbox]")).forEach(el => {
                totalAmount += Number($(el).parents("tr").find(".cartTotal").text());
            })
            $("#totalAmount").text(totalAmount.toFixed(2));
        } else {
            totalAmount = 0;
            $("#totalAmount").text("0.00");
        }
    })
    let currentStatusNum = 0; //当前checked为true的数量
    $(".cartTbody").find("input[type=checkbox]").on("click", function() {
        let totalAmount = parseInt($("#totalAmount").text());
        let currentlength = $(".cartTbody").find("input[type=checkbox]").length; //当前商品列表数量
        $(this).each((index, el) => {
            let status = $(el).prop("checked");
            if (status) {
                //如果为true，加上当前商品的总价，赋值给总金额
                totalAmount += Number($(el).parents("tr").find(".cartTotal").text());
                $("#totalAmount").text(totalAmount.toFixed(2));
                //如果为true，index+1，当index=等前商品数量时，全选按钮勾上
                currentStatusNum++;
                if (currentStatusNum >= currentlength) {
                    $("#checkAll").prop("checked", "checked");
                }
            } else {
                //如果为false，减去当前商品的总价，赋值给总金额
                totalAmount -= Number($(el).parents("tr").find(".cartTotal").text());
                $("#totalAmount").text(totalAmount.toFixed(2));
                //为false,index-1
                currentStatusNum--;
                if (currentStatusNum <= currentlength) {
                    $("#checkAll").prop("checked", "");
                }
            }
        })
    })

    //删除
    $(".delCart").on("click", function() {
        let currentTotal = Number($(this).parents("tr").find(".cartTotal").text()); //当前商品的总额
        let totalAmount = Number($("#totalAmount").text());
        $("#totalAmount").text(totalAmount - currentTotal);
        $(this).parents("tr").remove();
        //当前没有商品时，提示框显示
        let amountLength = $(".cartTbody").find("input[type=checkbox]").length;
        if (amountLength == 0) {
            $(".noShop").css({
                display: "block"
            })
        }
    })





    //我的订单金额计算
    $(".orderlist").on("click", ".orderCheckbox", function() {
        let currentStatus = $(this).prop("checked"); //拿到当前checkbox的状态

        let amount = Number($("#ordersAmount").text()); //总金额
        $(this).parents(".orderlist").find("tbody .ordersPrice").each((index, el) => {
            if (currentStatus) {
                amount += parseFloat($(el).text());
                $("#ordersAmount").text(amount.toFixed(2));
            } else {
                amount -= parseFloat($(el).text());
                $("#ordersAmount").text(amount);
            }
        })
        console.log(amount);
    })


    //密码提示框
    $("#submitOrders").on("click", function() {
            $(".tipsPassword").css({
                display: "block"
            })
            let str = ''; //去接收每一个所输入的密码框的值
            $(".tips").find("input")[0].focus();

            function digui() {
                let index = 0;
                $(".tips").find("input").on("input", function() {
                    let status = $(this).val();
                    str += status;
                    if (status) {
                        index++;
                        if (index == 6) {
                            index = 5;
                            $(".tips").find("input")[index].blur(); //失去焦点
                            str2 = str;
                            let timer = setTimeout(function() {
                                if (str2 == "123456") {
                                    alert("密码正确");
                                    $(".tipsPassword").css({
                                        display: "none"
                                    })
                                    $(".tips").find("input").val("");
                                    index = 0;
                                    clearTimeout(timer);
                                    console.log(index);
                                    return;
                                } else {
                                    alert("密码错误");
                                    $(".tips").find("input").val("");
                                    $(".tips").find("input")[0].focus();
                                    index = 0;
                                    digui();
                                    clearTimeout(timer);
                                    return;
                                }
                                clearTimeout(timer);
                            }, 1000)
                            console.log(index);
                        }
                        $(".tips").find("input")[index].focus(); //动态聚焦
                    }
                })
            }
            digui();

        })
        //返回
    $("#tipsback").on("click", function() {
        $(".tipsPassword").css({
            display: "none"
        })
    })

})